<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="minicolors/jquery.minicolors.js"></script>
	    <link rel="stylesheet" href="minicolors/jquery.minicolors.css">
	</head>
	<body>
		<input type="text"/>
		<script type="text/javascript">
			$('input').minicolors({
                control: 'wheel',
                defaultValue: '#abcdef',
                format: 'hex',
                keywords: '',
                inline: false,
                letterCase: 'lowercase',
//              opacity: 1,
                position: 'bottom left',
                swatches: ["#ef9a9a","#90caf9","#a5d6a7","#fff59d","#ffcc80","#bcaaa4","#eeeeee","#f44336","#2196f3","#4caf50","#ffeb3b","#ff9800","#795548","#9e9e9e"],
                change: function(value, opacity) {
                    if( !value ) return;
                    if( opacity ) value += ', ' + opacity;
                    if( typeof console === 'object' ) {
                        console.log(value);
                    }
                },
                theme: 'default'
            });
		</script>
	</body>
</html>
